Py.Cafe

amward/

How to add images as markers in a Plotly figure

Impact of Goal Difference on Points in the Women's Super League

DocsPricing
  • app.py
  • requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
# App adapted from Plotly Figure Friday submission:
# https://community.plotly.com/t/figure-friday-2024-week-29/85928/60

# Demo of how to add images as markers in a Plotly Figure


from dash import Dash, html, dcc, Output, Input
import plotly.express as px
import pandas as pd
import dash_bootstrap_components as dbc

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/Figure-Friday/main/2024/week-29/ewf_standings.csv"
)
df["team_name"] = df["team_name"].str.rsplit(" ", n=1).str[0]
df = df.loc[(df['season'].isin(['2023-2024', '2022-2023', '2021-2022'])) & (df['division'].isin(["Women's Super League (WSL)", "FA Women's Super League (WSL)"]))]

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    [
        html.H3(
            "Impact of Goal Difference on Points in the Women's Super League",
            className="mt-1",
        ),
        dbc.Label("Select Season", html_for="figure-marker-images-x-season"),
        dbc.Select(
            id="figure-marker-images-x-season",
            value="2023-2024",
            options=["2023-2024", "2022-2023", "2021-2022"],
            style={"width": "300px"},
            className="mb-2",
        ),
        dcc.Graph(id="figure-marker-images-x-graph", config={"displayModeBar": False}),
    ],
    fluid=True,
)


@app.callback(
    Output("figure-marker-images-x-graph", "figure"),
    Input("figure-marker-images-x-season", "value")
)
def update_figure(input):
    dff = df.loc[df["season"] == input]
    fig = px.scatter(
        dff,
        x="goal_difference",
        y="points",
        hover_data=["team_name", "position"],
        hover_name="team_name",
    )

    for i, row in dff.iterrows():
        team = row["team_name"]
        fig.add_layout_image(
            dict(
                source=f"https://raw.githubusercontent.com/Moh-Ozzi/Figure-Friday-2024---week-29/main/GB1/{team}.png",
              #  source=f"/assets/team_logs/{team}.png",
                xref="x",
                yref="y",
                xanchor="center",
                yanchor="middle",
                x=row["goal_difference"],
                y=row["points"],
                sizex=7,
                sizey=7,
                sizing="contain",
                opacity=1,
                layer="above",
            )
        )

    fig.update_layout(
        height=600,
        plot_bgcolor="#FAF8FA",
        margin=dict(l=10, r=10, t=10, b=10),
        hoverlabel=dict(bgcolor="white", font_size=13, font_family="Arial"),
    )

    return fig


if __name__ == "__main__":
    app.run(debug=True)